<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script>
			// post 和 put 的区别：
			// post 用来向后台发送参数、数据，添加功能、用户名登录
			// put 用来更新、编辑数据，图书编辑

			// 传统 URL 传参
			fetch('http://127.0.0.1:3000/books', {
				method: 'post',
				// body 是传递参数
				body: 'uname=tom&pwd=123',
				// headers 设置请求头
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				}
			})
				.then((data) => {
					return data.text()
				})
				.then((data) => {
					console.log(data)
				})

			// 发送 json 格式的数据
			fetch('http://127.0.0.1:3000/books', {
				method: 'post',
				// body 是传递参数
				body: JSON.stringify({
					uname: 'jerry',
					pwd: 789
				}),
				// headers 设置请求头
				headers: {
					'Content-Type': 'application/json'
				}
			})
				.then((data) => {
					return data.text()
				})
				.then((data) => {
					console.log(data)
				})

			// json 格式的参数 和 字符型的参数区别：
			// 1. json 格式的参数 需要使用 JSON.stringify() 转换
			// 2. 两种的请求头不一样
			//    json 格式的请求头是 application/json
			//    字符型 的请求头是 application/x-www-form-urlencoded

			// 发送 put 请求
			fetch('http://127.0.0.1:3000/books/1', {
				method: 'put',
				// body 是传递的参数
				body: JSON.stringify({
					uname: 'jerry',
					pwd: 789
				}),
				// headers 设置请求头
				headers: {
					'Content-Type': 'application/json'
				}
			})
				.then((data) => {
					return data.text()
				})
				.then((data) => {
					console.log(data)
				})
		</script>
	</body>
</html>
